<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="裂变记录" :visible.sync="dialogVisible" @close="resetForm()" width="400px">
       <div class="record_box">
           <div class="record_item flexbox flexcenter" v-for="(item,index) in recordList" :key="index">
               <el-checkbox v-model="item.checked" @change="checkRecord"></el-checkbox>
               <div class="record_info flex">
                   <div class="record_list flexbox flexbetween">
                       <span class="record_title">{{fission_type==0?'裂变':'原始'}}需求ID</span>
                       <span class="record_text">{{item.id}}</span>
                   </div>
                   <div class="record_list flexbox flexbetween">
                       <span class="record_title">裂变类型</span>
                       <span class="record_text">{{item.fission_type==1?'修改':'调整'}}</span>
                   </div>
                   <div class="record_list flexbox flexbetween">
                       <span class="record_title">裂变原因</span>
                       <span class="record_text">{{item.fission_reason}}</span>
                   </div>
               </div>
           </div>
       </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm()" class="el-button-width" size="small">取 消</el-button>
            <el-button type="primary" @click="submitForm()" class="el-button-width" size="small" :disabled='disabled' :loading="disabled">跳转原需求</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            disabled: false,
            dialogVisible: false,
            fission_type:null,
            recordList:[],
            hasCheck:[],
            id:'',
        };
    },

    created() {
        this.$bus.on("fissionRecordClip", (value) => {
            this.id = value.id
            this.fission_type = value.fission_type
            this.dialogVisible = value.dialogVsb;
            this.getRecordList()
        });
    },
    beforeDestroy() {
        this.$bus.off("fissionRecordClip");
    },
    methods: {
        //获取品牌列表
        async getRecordList() {
            const { data: res } = await this.$http.post(
                "adminapi/demandhz/clipFissionHistory",
                {
                    id:this.id
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                for(let i in res.data){
                    res.data[i].checked = false
                }
                this.recordList = res.data;
            }
        },

        checkRecord(){
            let arr = []
            for(let i in this.recordList){
                if(this.recordList[i].checked){
                    arr.push(this.recordList[i].id)
                }
            }
            this.hasCheck = arr
        },

        submitForm(){
            if(this.hasCheck.length==0){
                this.$message.error('请选择记录！');
                return;
            }else{
                this.$parent.queryInfo.id = this.hasCheck
                this.$parent.queryInfo.is_all = 1
                this.$parent.getDataList(1);
                this.dialogVisible = false;
            }
        },


        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
        },
    },
};
</script>
<style scoped>
    .record_item{
        background-color: #F8F9FB;
        border-radius: 2px;
        padding: 8px 12px;
    }
    .record_title{
        font-size: 14px;
        color: #616C85;
        line-height: 22px;
        width: 80px;
        flex-shrink: 0;
    }
    .record_text{
        font-size: 14px;
        color: #17233D;
        line-height: 22px;
    }
    .record_info{
        margin-left: 15px;
    }
    .record_list{
        padding: 4px 0;
    }
</style>

